<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>市场指标可视化</title>
    <!-- Tailwind CSS -->
    <script src="./js/cdn.tailwindcss.com/3.4.17.js"></script>
    <!-- Font Awesome -->
    <link href="./css/font-awesome.min.css" rel="stylesheet">
    <!-- ECharts -->
    <script src="./js/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="./js/data.js"></script>
    <script src="./js/index.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1a56db',
                        secondary: '#e2e8f0',
                        success: '#10b981',
                        danger: '#ef4444',
                        warning: '#f59e0b',
                        info: '#3b82f6',
                        light: '#f8fafc',
                        dark: '#1e293b'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .chart-container {
                min-height: 500px;
            }
            .panel-shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .transition-all {
                transition: all 0.3s ease;
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">
    <div class="container mx-auto px-4 py-6">
        <!-- 页面标题 -->
        <header class="mb-8">
            <h1 class="text-3xl font-bold text-center text-center">市场指标趋势分析</h1>
            <p class="text-gray-600 text-center mt-2">实时市场关键指标可视化展示</p>
        </header>

        <!-- 控制面板 -->
        <div class="bg-white rounded-lg shadow-md p-4 mb-6">
            <div class="flex flex-wrap items-center justify-between">
                <div class="flex flex-wrap gap-2 mb-4 md:mb-0">
                    冰点出现新板块值得关注；高潮的板块注意兑现，关注第二天的新闻消息；盘整期谨慎观望，出现的任何板块都得打个问号。
                    <div style="color: red;">情绪持续有多长，结束后差行情就会有多久</div>
                </div>
                <div class="flex items-center">
                    <label for="date-range" class="mr-2 text-sm text-gray-600">日期范围:</label>
                    <select id="date-range" class="border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary">
                        <option value="30" selected>近30天</option>
                        <option value="60">近60天</option>
                        <option value="90">近90天</option>
                        <option value="120">近120天</option>
                        <option value="200">近200天</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- 图表容器 -->
        <div class="bg-white rounded-lg shadow-md p-4 mb-6">
            <div id="stock-chart" class="chart-container"></div>
        </div>

    </div>
</body>
</html>
